const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: "./index.js",
  output: {
    filename: "[name].[hash:8].js", //当有多个入口配置时，使用占位符，并配置hash值（主要是为了避免缓存）
    path: path.resolve(__dirname, "dist"), //打包出来的文件的路径
    publicPath: "/",
  },
  resolve: {
    //配置扩展名
    extensions: [".js"],
    //配置别名，可以通过 'src/xxx' 直接访问src的目录
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
  devtool: "source-map",
  devServer: {
    //开发服务器配置
    port: 3000, //设置服务的端口号
    progress: false, //将运行进度输出到控制台。
    host: "127.0.0.1",
    contentBase: "./dist", //指定服务的默认目录
    compress: false, //是否压缩文件
    open: true, //是否自动打开浏览器
  },
  plugins: [
    new CleanWebpackPlugin(), //打包自动清空之前打包的文件目录
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./public/index.html", //指定一个html模板
      hash: true, // 为静态资源生成hash值（避免缓存）
      inject: "body", //向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。
      xhtml: true, //true 或者 false, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
      minify: {
        removeComments: true,
      },
    }),
    new MiniCssExtractPlugin({
      //输入的文件名前面添加路径，那个路径就是打包之后的目录
      filename: "css/[name].[chunkhash].[contenthash].css",
    }),
  ],
  //优化项，里面放着优化的内容
  optimization: {
    minimize: true, //开启优化项，注意配置在「optimization.minimizer」中的优化项，只会在这个属性为true时才会生效
    minimizer: [
      // 表示放优化的插件
      new TerserPlugin({
        parallel: true, //开启多进程并行压缩
      }),
      // new UglifyJsPlugin(),
      // new OptimizeCssAssetsWebpackPlugin({
      //   assetNameRegExp: /\.css$/g, //指定要压缩模块的正则
      //   cssProcessor: require("cssnano")({
      //     preset: "default",
      //   }),
      // }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            //使用babel-loader将es6转化为es5
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        //postcss-loader要在css-loader之前处理
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
      // {
      //   test: /\.less$/,
      //   use: ["style-loader", "css-loader", "sass-loader"],
      // },
      {
        test: /\.(html| htm)$/,
        use: ["html-withimg-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            //url-loader内置了file-loader，会把没有超过设置的大小的静态资源图片，转成base64字符串嵌入到html中去，超过的用file-loader单独打包处理
            loader: "url-loader",
            options: {
              esModule: false, //启用CommonJS模块语法
              limit: 20000,
              outputPath: "images", //打包图片输出的文件目录
              publicPath: "/images", //构建后在html中的路径
            },
          },
        ],
      },
    ],
  },
};
